<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="打卡结果" />
		<view class="top-menu">
		</view>
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
			:scroll-with-animation='true'>
			<view class="content-view-back">
				<view class="anwserend-result-backView">
					<image class="result-top-banner" src="../../static/image/fjh/fengjihua_logo.png">
					</image>
					<view class="result-top-message first">恭喜你完成了</view>
					<view class="result-top-message first" v-if="resultData.errorWord">今天的打卡</view>
					<view class="result-top-message first" v-else>本阶段的测试</view>
					<view class="result-top-message" style="font-size: 25px; margin-top: 25px;">正确率</view>
					<view class="result-top-probabilityNumber">{{resultData.correctRate}}</view>
					<view class="result-top-integral">恭喜获得{{resultData.pointsVariety}}积分，累计{{resultDataIntegral}}积分
					</view>
					<view class="result-top-englishStr">{{resultData.msg}}</view>
					<view class="result-bottom-contentBack">
						<view class="result-bottom-content">
							<view class="result-bottom-timeStr">{{resultData.yearAndMonth}} {{resultData.day}}</view>
							<view class="result-bottom-resultStr">今日一共学习了<text
									class="redStr">{{resultData.learningWordCount}}</text>个单词</view>
							<view class="result-bottom-menuback">
								<view class="result-bottom-menu-button">
									<view class="result-bottom-menu-button-str">正确<text
											class="redStr">{{!resultData.masterWord ? '0' : resultData.masterWord.length}}</text>个单词
									</view>
								</view>
								<view class="result-bottom-menu-button">
									<view class="result-bottom-menu-button-str">错误<text class="redSte"><text
												class="redStr">{{resultData.errorWord ? resultData.errorWord.length : 0}}</text></text>个单词</view>
								</view>
							</view>
						</view>
					</view>
					<view class="result-bottom-resultTwo" v-if="dayId">
						<!-- <view class="bottom-button-backView left" @click="shareTap">分享</view> -->
						<view class="bottom-button-backView center" @click="checkDetailTap">查看详情</view>
						<view class="bottom-button-backView right" @click="newWordTap">生词本</view>
					</view>
					<view class="result-bottom-resultThree" v-else>
						<view class="bottom-button-backView left" @click="backTap">好的</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: 0,
				resultDataIntegral: 0,
			}
		},
		onReady() {
			const that = this;
			uni.createSelectorQuery().select('.top-menu').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
			}).exec();
		},
		onLoad() {
			var endResultData = uni.getStorageSync("endResultData");
			this.dayId = endResultData.dayId;
			this.resultData = endResultData.resultData;
			this.resultDataIntegral = this.$util.changeNumber(endResultData.resultData.integral, 2);
			this.answerStrData = endResultData.answerData;
			this.beePlanLogId = endResultData.beePlanLogId;
			this.planType = endResultData.planType;
			var beePlanKey = 'beePlanDate' + endResultData.planType + endResultData.beePlanLogId + endResultData.dayId;
			uni.removeStorage({
				key: beePlanKey
			})
			uni.removeStorageSync("endResultData")
		},
		methods: {
			// 查看单词列表
			checkDetailTap: function() {
				uni.navigateTo({
					url: '/pages/planBee/wordClickResultWordList?answerStr=' + JSON
						.stringify(this.answerStrData),
				})
			},
			//生词本
			newWordTap: function() {
				uni.navigateTo({
					url: '/pages/planBee/wordClockNewWordsPad',
				})
			},
			backTap: function () {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	.content-view-back {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.anwserend-result-backView {
		width: 350px;
		border-radius: 15px;
		margin: 20px 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: var(--beeGradeTopBack);
	}

	.result-top-banner {
		width: 135px;
		height: 45px;
		margin-top: 25px;
		margin-bottom: 10px;
	}

	.result-top-message {
		width: 100%;
		text-align: center;
		font-size: 30px;
		color: white;
		font-family: 'hzgb';
		text-shadow: -1px 1px 0 #ffcf29, 1px 1px 0 #ffcf29, 1px -1px 0 #ffcf29, -1px -1px 0 #ffcf29;
		-webkit-text-stroke: 1px #ffcf29;
	}

	.first {
		margin-top: 10px;
	}

	.result-top-probability {
		width: 100%;
		text-align: center;
		font-size: 20px;
		font-weight: 900;
		color: #000;
		margin-top: 20px;
	}

	.result-top-probabilityNumber {
		height: 70px;
		padding: 0px 50px;
		line-height: 70px;
		border-radius: 50px;
		text-align: center;
		font-size: 45px;
		font-family: 'hzgb';
		margin: 20px 0px;
		color: rgb(255, 255, 255);
		background: var(--beeButtonRightBack);
	}

	.result-top-englishStr {
		width: 100%;
		text-align: center;
		font-size: 20px;
		font-weight: 900;
		color: #ffffff;
		text-shadow: -1px 1px 0 #ffcf29, 1px 1px 0 #ffcf29, 1px -1px 0 #ffcf29, -1px -1px 0 #ffcf29;
		-webkit-text-stroke: 1px #ffcf29;
		margin-top: 15px;
		margin-bottom: 10px;
	}

	.result-top-integral {
		width: 100%;
		text-align: center;
		font-size: 15px;
		font-family: 'hzgb';
		color: #ffffff;
	}

	.result-center-timeView {
		width: 156px;
		height: 142px;
		background-image: url(../../static/image/fjh/liubianxing_white.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: 10px;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.timeContent {
		/* line-height: 284rpx; */
		text-align: center;
		font-size: 15px;
		font-weight: bold;
		/* height: 35rpx; */
	}

	.result-bottom-resultOne {
		width: 345px;
		height: 175px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: black;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		z-index: 98;
		margin-top: -71px;
	}

	.endClass {
		justify-content: flex-end;
	}

	.centerClass {
		justify-content: center;
	}

	.strend {
		margin-bottom: 20px;
	}

	.result-bottom-resultTwo {
		width: 100%;
		height: 60px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.result-bottom-resultThree {
		width: 100%;
		height: 60px;
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.result-bottom-resultStr {
		width: 100%;
		font-size: 19px;
		color: rgb(0, 0, 0);
		text-align: center;
		margin-top: 15px;
		font-family: 'hzgb';
	}

	.result-bottom-menuback {
		width: 100%;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.result-bottom-menu-button {
		width: 120px;
		height: 40px;
		border-radius: 20px;
		padding: 3px;
		box-sizing: border-box;
		font-size: 13px;
		background: var(--beeButtonRightBack);
	}

	.result-bottom-menu-button-str {
		width: 115px;
		height: 35px;
		line-height: 35px;
		border-radius: 18px;
		font-size: 12px;
		font-family: 'hzgb';
		text-align: center;
		background: #fff9cf;
	}

	.result-bottom-contentBack {
		width: 310px;
		padding: 3px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--beeButtonRightBack);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}

	.result-bottom-content {
		width: 305px;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fff9cf;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}

	.result-bottom-timeStr {
		width: 100%;
		font-size: 19px;
		color: black;
		text-align: center;
		font-family: 'hzgb';
	}

	.yellowStr {
		color: yellow;
		font-size: 13px;
	}

	.redStr {
		color: red;
		font-size: 13px;
	}

	.bottom-button-backView {
		width: 100px;
		height: 35px;
		border-radius: 20px;
		font-size: 15px;
		text-align: center;
		line-height: 35px;
		font-family: 'hzgb';
	}

	.left {
		background: var(--navBackColor);
		color: white;
	}

	.center {
		background: var(--themeViewBackColor);
		color: white;
	}

	.right {
		background: var(--themeColorTwo);
		color: white;
	}

	.check-detail {
		width: 100%;
		font-size: 14px;
		color: #f3eb1d;
		text-align: center;
		font-weight: 500;
		height: 20px;
		line-height: 20px;
		text-decoration-line: underline;
	}
</style>